<template>
    <div>
        <el-button size="small" @click="visible = true">选择客户</el-button>
        <span class="m-l">{{customerName}}</span>
        <el-dialog
            title="选择客户"
            :visible.async="visible"
            @close="visible = false"
            >
            <el-form label-width="60px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="客户:">
                            <el-input clearable v-model="categoryForm.customerName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="区域:">
                            <el-cascader
                                filterable
                                clearable
                                v-model="categoryForm.areaSn"
                                :options="areaList"
                                :props="{ checkStrictly: true }"
                                @change="handleChangeArea"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="市场:">
                            <el-select 
                                filterable 
                                clearable 
                                remote
                                :remote-method="remoteMarket" 
                                v-model="categoryForm.marketSn">
                                <el-option
                                    v-for="item in marketList"
                                    :key="item.marketSn"
                                    :label="item.marketName"
                                    :value="item.marketSn">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="getCustomerByParams">查询</el-button>
                            <!-- <div>
                                <el-button type="primary" @click="getCustomerByParams">查询</el-button>
                            </div> -->
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <avue-crud
                ref="selectCustomerForm"
                :data="customerList"
                :option="option"
                :page.sync="page"
                @on-load="getCustomerList"
                @current-row-change="setCurrentRow"
            >

            </avue-crud>
        </el-dialog>
    </div> 
</template>

<script>
import { fetchList as customerListApi } from '@/api/crm/customer';
import { areaTree } from '@/api/crm/area';
import { fetchList as marketListApi  } from '@/api/crm/marketmanage';
import { formatCascader } from '@/const/common/tool';
export default {
    props: {
        customerObj: {
            type: Object,
        },
    },
    data() {
      return {
        visible: false,
        customerName: this.customerObj.customerName,
        customerSn: this.customerObj.customerSn,
        categoryForm:{
            customerName: '',
        },
        page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
        },
        customerList: [],
        areaList:[],
        marketList: [],
        option:{
          menu: false,
          addBtn: false,
          refreshBtn: false,
          columnBtn: false,
          type: 'radio',
          align:'center',
          menuAlign:'center',
          column:[{
              label: '客户编码',
              prop: 'customerSn',
          }, {
              label: '客户',
              prop: 'customerName',
          }, 
        //   {
        //       label: '区域',
        //       prop: 'areaName',
        //   }, {
        //       label: '市场',
        //       prop: 'marketName',
        //   }
          ],
        },
      }
    },
    watch: {
        customerObj(newValue) {
            this.customerSn = newValue.customerSn;
            this.customerName = newValue.customerName;
        },
    },
    created() {
        this.getAreaList();
    },
    methods: {
        async getCustomerList(page, params) {
            let query = getForm(this.categoryForm);
            let res = await customerListApi(Object.assign({
                current: page.currentPage,
                size: page.pageSize,
            }, params, query));
            this.customerList = res.data.data.records;
            this.page.total = res.data.data.total;
        },
        async getAreaList(page, params) {
            let res = await areaTree({current: 1, size: 100});
            this.areaList = formatCascader(res.data.data, 'areaName', 'areaSn');
        },
        async getMarketList(areaSn) {
            let res = await marketListApi({areaSn});
            this.marketList = res.data.data.records;
        },
        async remoteMarket(marketName) {
            let areaSn = '';
            let value = this.categoryForm.areaSn;
            if(Array.isArray(value) && value.length > 0) areaSn = value[value.length -1];
            let res = await marketListApi({areaSn, marketName, current: 1, size: 20});
            this.marketList = res.data.data.records;
        },
        handleChangeArea(value) {
            let areaSn = '';
            if(Array.isArray(value) && value.length > 0) areaSn = value[value.length -1];
            this.getMarketList(areaSn);
        },
        getCustomerByParams() {
            let query = getForm(this.categoryForm);
            this.getCustomerList({
                current: 1,
                size: 20,
            }, query);
        },
        setCurrentRow(val) {
            // this.customerName = val.customerName;
            // this.customerSn = val.customerSn;
            this.visible = false;
            this.$emit('changeCustomer', {
                customerSn: val.customerSn,
                customerName: val.customerName,
            });
        }
    }
}

function getForm(categoryForm) {
    // 深拷贝数据
    let query = JSON.parse(JSON.stringify(categoryForm));
    let areaSn = query.areaSn;
    if(Array.isArray(areaSn) && areaSn.length > 0) {
        query.areaSn = areaSn[areaSn.length -1];
    } else {
        query.areaSn = '';
    }
    return query;
}
</script>